<template>
  <div>
    <div class="bg-light">
      <div class="container-title">服务标签</div>
      <div class="pl pb">
        <CheckboxGroup v-model="checkedArr">
          <Checkbox v-for="(item, index) in list" :key="index" :label="item.productTagId" :disabled="item.disabled">{{ item.name }}</Checkbox>
        </CheckboxGroup>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isLook: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checkedArr: [],
      tagArr: [],
      isShelf: true,
      productServiceTagIds: []
    }
  },
  computed: {
    list () {
      // islock 为 true 都disabled
      // 超出三个，其他为disabled
      this.tagArr.forEach(item => {
        if ((this.checkedArr.length >= 3 && this.checkedArr.indexOf(item.productTagId) == -1)) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      })
      return this.tagArr
    }
  },
  mounted () {
    this.getTagData()
  },
  methods: {
    getTagData () {
      this.$ajaxPost('/product/common/server/tag/list').then(data => {
        this.tagArr = (data || []).map(item => {
          return {
            productTagId: item.id,
            name: item.name,
            disabled: false
          }
        })
      })
    }
  }
}
</script>
